<template>
  <div class="fullscreen-login">
    <!-- 动态背景层 -->
    <div class="background-layer">
      <div class="particles"></div>
      <div class="gradient-overlay"></div>
    </div>

    <!-- 登录内容 -->
    <div class="login-content">
      <div class="brand-section">
        <h1 class="app-name">Flexi - Creat</h1>
        <p class="slogan">发现世界的无限可能</p>
      </div>

      <form  @submit.prevent="handleSubmit" class="login-form">
        <div class="form-group">
          <label for="username" class="input-label">
            <svg class="icon">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
            账号
          </label>
          <input 
            type="text" 
            id="username" 
            v-model="username"
            required
            class="floating-input"
          />
        </div>

        <div class="form-group">
          <label for="password" class="input-label">
            <svg class="icon">
              <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
            </svg>
            密码
          </label>
          <input
            type="password"
            id="password"
            v-model="password"
            required
            class="floating-input"
          />
        </div>
        <div class="button-container">
          <button type="submit" class="glow-button">
            <span>登录</span>
            <div class="hover-effect"></div>
          </button>
          <button type="button" @click="goToRegister" class="glow-button">
            <span>注册</span>
            <div class="hover-effect"></div>
          </button>
        </div>
      </form>

      <div v-if="errorMessage" class="error-message">
        <svg class="warning-icon" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
        </svg>
        {{ errorMessage }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios'; // 引入 axios

// 配置 Axios 实例（推荐将此部分放在 main.js 统一管理）
const apiClient = axios.create({
  baseURL: 'http://localhost:8088/lrapi', // 统一基础URL
  timeout: 10000, // 设置超时时间
});

export default {
  setup() {
    const router = useRouter();
    const username = ref('');
    const password = ref('');
    const errorMessage = ref('');

    const handleSubmit = async () => {
      try {
        // 使用 Axios 发送 POST 请求
        const response = await apiClient.post('/login', {
          username: username.value,
          password: password.value,
        })
        .then(response => {
          const token = response.data.data.accessToken;
          const data = response.data;
          // console.log(token);
          localStorage.setItem('token', token); // 存储 Token
          alert(data.message); // 登录成功提示
          router.push('/mainLayout'); // 跳转主页
        });
      } catch (error) {
        // 处理网络错误或服务器异常
        if (error.response) {
          // 服务器返回了错误状态码
          errorMessage.value = `错误 ${error.response.status}: ${error.response.data.message}`;
        } else if (error.request) {
          // 请求已发出但无响应
          errorMessage.value = '网络连接失败，请检查网络';
        } else {
          // 其他错误
          errorMessage.value = `请求错误: ${error.message}`;
        }
        console.error('Login error:', error);
      }
    };
    const goToRegister = () => {
        console.log("1111");
        router.push('/register'); // 确保路由配置中存在/register路径
    };
    return {
      username,
      password,
      errorMessage,
      handleSubmit, 
      goToRegister
    };
  },
};
</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.fullscreen-login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 2;
}

.background-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
  animation: particleAnim 20s linear infinite;
}

.gradient-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, 
    rgba(102, 126, 234, 0.2) 0%,
    rgba(118, 75, 162, 0.2) 100%
  );
}

.login-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 2rem;
  color: white;
  z-index: 1;
}

.brand-section {
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeInUp 1s ease;
}

.app-name {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slogan {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.8);
}

.login-form {
  width: 100%;
  max-width: 400px;
  animation: fadeIn 1s ease;
}

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.floating-input {
  width: 80%;
  padding: 1.2rem 1.2rem 1.2rem 5.5rem; /* 增加左内边距为图标腾出空间 */
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.floating-input:focus {
  outline: none;
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.input-label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.6);
  pointer-events: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1; /* 确保图标显示在输入框之上 */
}

.icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.floating-input:focus ~ .input-label,
.floating-input:not(:placeholder-shown) ~ .input-label {
  top: -10px;
  font-size: 0.875rem;
  color: #667eea;
}

.glow-button {
  position: relative;
  width: 60%;
  padding: 1.2rem;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.glow-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(118, 75, 162, 0.4);
}

.hover-effect {
  position: absolute;
  background: rgba(255,255,255,0.1);
  width: 50px;
  height: 100%;
  left: -50px;
  top: 0;
  transform: skewX(-30deg);
  transition: left 0.3s ease;
}

.glow-button:hover .hover-effect {
  left: 110%;
}

.error-message {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(255, 87, 87, 0.15);
  border: 1px solid #ff5757;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  backdrop-filter: blur(5px);
}

.warning-icon {
  width: 24px;
  height: 24px;
  fill: #ff5757;
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes particleAnim {
  from { background-position: 0 0 }
  to { background-position: 100% 100% }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px) }
  to { opacity: 1; transform: translateY(0) }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px) }
  to { opacity: 1; transform: translateY(0) }
}

@media (max-width: 768px) {
  .app-name {
    font-size: 2rem;
  }
  
  .slogan {
    font-size: 1rem;
  }
}
</style>